<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/highcharts.js"></script>
    <script type="text/javascript">
        document.write(unescape('%3Clink rel="stylesheet" type="text/css" href="./css/chart.css?v=' + new Date().getTime() + '"%3E'))
        document.write(unescape('%3Cscript src="./js/AdminChart.js?v=' + new Date().getTime() + '" type="text/javascript" %3E%3C/script%3E'));
    </script>
</head>
<body>
<div style="margin: 20px;border: 1px solid #ccc;">
    <div id="chart" style="width: 100%;height: 500px;"></div>
</div>
<script type="text/javascript">
    $('#chart').highcharts({
        chart: {
            borderColor: '#E5E8EB',//图表框颜色
            borderWidth: 1,//图表框宽度
            backgroundColor: '#F6F6F6',//图表背景色
            plotBackgroundColor: null,//绘图区无颜色
            plotBorderWidth: null,//绘图区边框宽度
            plotShadow: false,//绘图区阴影效果
            spacing: [100, 20, 100, 20]//图表内边距，上右下左
        },
        colors: [
            '#EFE07C', '#89B5EB', '#F8AA9E', '#FFC7B8', '#F18686', '#EFC27C'
        ],// colors是饼图或者环形图中每一块的颜色
        credits: {
            enabled: false//右下角的版权信息不显示
        },
        title: {
            floating: true,
            text: '<div style="text-align:center" ><img src="http://liuxunming.com/image/avatar.png" width="20px" height="20px" style="vertical-align: middle"/></div>个人简介',//环形图中心显示文字加图片
            useHTML: true,//必须设置true才能加图片
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
        },//浮动的数据提示框
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.2f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            innerSize: '70%',// 圆环厚度百分比
            name: '占比',//浮动框的文字提示
            showInLegend: true,//显示图例
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8],
                ['Opera', 6.2],
                ['Opera2', 16.2],
                ['Opera3', 36.2],
            ]
        }],
        legend: {
            layout: 'horizontal',//图例水平排放，超过宽度后换行
            labelFormat: '{name} {percentage:.2f} %',
            symbolHeight: 8,//图例小标志高度
            symbolWidth: 8,
            width: 220,//图例区宽度
            align: 'center',
            symbolRadius: 0// 图例形状为方形
        },
    }, function (c) {
        // 环形图圆心
        var centerY = c.series[0].center[1],
                titleHeight = parseInt(c.title.styles.fontSize);
        c.setTitle({
            y: centerY + titleHeight / 2
        });
        chart = c;
    });

</script>
</body>
</html>